import React from 'react'
import { Card, ProgressBar, Divider } from 'antd-mobile'
import { InformationCircleOutline } from 'antd-mobile-icons'
import TabBar1 from '../../components/TabBar/TabBar'
export default function GrowthLevel() {
    let obj = { name: '西瓜', img: 'https://img2.baidu.com/it/u=2900710564,2408084692&fm=253&fmt=auto&app=138&f=JPEG' }
    let list = [
        { name: '下单消费20', day: '2024-3-12 10:00:00', res: '+2' },
        { name: '下单消费20', day: '2024-3-12 10:00:00', res: '+2' },
        { name: '下单消费20', day: '2024-3-12 10:00:00', res: '+2' },
        { name: '下单消费20', day: '2024-3-12 10:00:00', res: '+2' },
        { name: '下单消费20', day: '2024-3-12 10:00:00', res: '+2' },
    ]
    return (
        <div style={{ background: 'linear-gradient(to bottom, rgb(255,102,0), rgb(246,246,246))', }}>
            {/* 顶部 */}
            <div style={{ padding: '6% 0', textAlign: 'center', color: 'white', fontSize: 'large', fontWeight: 'bold' }}>成长等级</div>
            {/* 用户个人信息 */}
            <Card style={{ margin: '0 auto', width: '90%', }}>
                <div style={{ marginLeft: '1%', display: 'flex', }}>
                    <img src={obj.img} alt="" style={{ width: '5em', height: '5em', border: '0.3em white solid', borderRadius: '50%' }} />
                    <div style={{ marginLeft: '6%', }}>
                        <div style={{ fontSize: 'large', marginTop: '5%' }}>Hi，{obj.name}</div>
                        <div style={{ color: 'rgb(153,153,153)', marginTop: '5%' }}>成长值12/200</div>
                        <div style={{ width: '160%', marginTop: '10%' }}>
                            <ProgressBar percent={20} style={{ '--track-color': 'rgb(216,216,216)', '--fill-color': 'rgb(255,102,0)', '--track-width': '5px', }} />
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', marginLeft: '33%', marginTop: '5%' }}>
                        <InformationCircleOutline fontSize={18} />
                        <div style={{ fontSize: 'small', color: 'rgb(153,153,153)' }}>等级说明</div>
                    </div>
                </div>
            </Card>
            {/* 记录卡片 */}
            <Card title='&nbsp;成长值记录' style={{ margin: '2% auto', width: '90%', }}>
                {list.map((item, index) => {
                    return (
                        <div key={index}>
                            <div style={{ display: 'flex', justifyContent: "space-between" }}>
                                <div>
                                    <div>{item.name}</div>
                                    <div style={{ marginTop: '8%', fontSize: 'small', color: 'rgb(153,153,153)' }}>{item.day}</div>
                                </div>
                                <div style={{ marginTop: '4%', color: 'rgb(255,102,0)', marginRight: '4%', }}>{item.res}</div>
                            </div>
                            <Divider style={{ borderColor: 'rgb(216,216,216)', }} />
                        </div>
                    )
                })}
            </Card>
            <TabBar1></TabBar1>
        </div>
    )
}
